<template>
  <div :class="prefixCls">
    <Icon
      :icon="iconObj.icon"
      class="!w-full"
      :style="{
        height: iconObj.height,
      }"
    />
  </div>
</template>

<script lang="ts" setup name="DemoPage">
  import { ref, onMounted } from 'vue';
  import { useDesign } from '/@/hooks/web/useDesign';
  import { Icon } from '/@/components/Icon';

  import { propTypes } from '/@/utils/propTypes';
  const { prefixCls } = useDesign('DemoPage');

  const props = defineProps({
    schema: propTypes.object.def({}),
  });
  const getIcon = {
    Signature: {
      icon: 'sign-card|svg',
      height: '100px',
    },
    IdentityCard: {
      icon: 'identity-card|svg',
      height: '209px',
    },
    ScanCode: {
      icon: 'scan-card|svg',
      height: '34px',
    },
  };
  const iconObj = ref<Indexable>({});

  onMounted(() => {
    iconObj.value = getIcon[props.schema.component] || {};
  });
</script>
<style lang="less" scoped>
  @prefix-cls: ~'@{namespace}-DemoPage';

  .@{prefix-cls} {
    display: flex;
    color: @border-color-base;
  }
</style>
